<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-27 17:50:33
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-28 19:18:02
 * @FilePath: /banban-front/pages/home/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="home-page" :style="`padding-top: ${statusBarHeight + 10}px`">
        <PageHeader>
            <template #left>
                <view class="header-icon user-set" @tap="navToSet"></view>
            </template>
            <template #right>
                <view class="header-icon voice-call"></view>
            </template>
        </PageHeader>

        <scroll-view class="scroll-content" scroll-y>
            <view class="" style="text-align: center;">
                <view></view>
                <image style="width: 366px; height: 613px; margin: 0 auto;" src="@/static/image/home/ai-person.png" />
            </view>
            <view style="height: 1000vh;">
                
            </view>
        </scroll-view>

        <view class="bottom-container">
            
            <!-- 通话按钮 -->
            <view class="primary-button">按住说话</view>
        </view>
    </view>
</template>
<script setup>
import PageHeader from '@/components/page-header'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import store from '@/store/index.js';
const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight)


// 去到设置页
const navToSet = () => {
    uni.navigateTo({
        url: '/pages/setting/index',
    });
}
</script>
<style lang="scss">
.home-page {
    height: 100vh;
    box-sizing: border-box;
    background: url('@/static/image/login/login-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: HarmonyOS Sans SC;
    /* overflow: hidden; */

    .header-icon {
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        
        &.user-set {
            background-image: url('@/static/image/home/media-user.png');
        }

        &.voice-call {
            background-image: url('@/static/image/home/phone-normal.png');
        }
    }

    .scroll-content {
        /* background-color: #000000; */
        height: calc(100vh - 150px);
    }


    .bottom-container {
        position: fixed;
        width: 100%;
        bottom: 0px;
        left: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 10px;
        /* height: 160px; */
        box-sizing: border-box;

        .primary-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100vw - 30px);
            height: 48px;
            opacity: 1;
            border-radius: 12px;
            background: #FFF;
            box-shadow: 0px 9.6px 19.2px  rgba(33, 34, 38, 0.05);
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 21.1px;
            color: rgba(93, 95, 239, 1);
            text-align: center;
        }
    }
}
</style>